<template>
  <div class="echarts" ref="echartsArea" :style="{ minHeight: '100px' }"></div>
</template>
<script>
import { onResizeChang, markLineF } from "../js/common";
import echarts from "echarts";
export default {
  name: "areas",
  props: {
    // 类型
    type: {
      type: String,
    },
    // 一些配置项
    setting: {
      type: Object,
      default: () => {},
    },
    // 数据
    data: {
      type: [Object, Array],
      default: () => [],
    },
  },
  data() {
    return {};
  },
  created() {
    // 监听屏幕改变的话就调用
    onResizeChang("start", this.onResizeChange);
  },
  methods: {
    echartInit() {
      let img = document.createElement("img");
      img.src = require("@/assets/images/screen/hight.png");
      if (!this.$refs.echartsArea) {
        return;
      }
      var myChart = this.$echarts.init(this.$refs.echartsArea);
      let type = this.type;
      var option = {
        // 图例位置
        // legend: {},
        // 图像大小
        tooltip: {
          trigger: "axis", // 触发类型：坐标轴触发
          formatter: function (params) {
            // let item = this.data.find((val) => val.name == params[0].name);
            let v;
            let n;
            if (Array.isArray(params)) {
              if (params[0].value) {
                v = params[0].value;
                n = params[0].name;
              } else if (params[1].value) {
                v = params[1].value;
                n = params[1].name;
              }
            } else {
              v = params.value;
              n = params.name;
            }
            return `<div "><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#0777C1;"></span> ${n}<span style="color:#FB7224;margin-left:6px;">${v}</span></div>`;
          },
          // axisPointer: {
          //     type: 'cross' // 十字准线指示器，显示指示线的样式
          // }
        },
        grid: {
          left: "5%",
          right: "5%",
          bottom: "10%",
          top: "14%",
          containLabel: true,
        },
        textStyle: {
          color: "#ffffff",
        },
        xAxis: {
          type: type,
          boundaryGap: true,
          data: this.getSplitData.label,
          axisLabel: {
            color: "#C5C0BF",
            fontSize: "6",
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            color: "#C5C0BF",
            fontSize: "8",
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "#FFFFFF00",
            },
            show: true,
          },
        },
        series: [
          {
            type: "line",
            // 平滑曲线
            smooth: true,
            itemStyle: {
              normal: {
                // color: function (params) {
                //     // 定义颜色列表
                //     var colorList = [
                //         '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
                //         '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
                //         '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
                //     ];
                //     return colorList[params.dataIndex];
                // }
                color: "#60C0DD",
              },
            },
            lineStyle: {
              shadowColor: "#666666",
              shadowOffsetY: 2,
            },
            label: {
              show: this.setting.label || false,
            },
            data: this.getSplitData.value,
            // 面积阴影样式
            areaStyle: {
              // 使用方法二的写法
              color: {
                type: "linear",
                x: 0, //右
                y: 0, //下
                x2: 0, //左
                y2: 1, //上
                colorStops: [
                  {
                    offset: 0,
                    color: "#65E6FF3D", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#65E6FF00", // 100% 处的颜色
                  },
                ],
              },
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 5,
                shadowOffsetX: 0,
                // shadowColor: 'pink',
                borderColor: "rgba(0, 255, 194, 0.55)",
                color: "rgba(0, 255, 194, 0.55)",
              },
            },
            // 警示线
            markLine: {
              data: [],
              lineStyle: {
                color: "#FCC31F",
                type: "dotted", // 设置为虚线
                // 鼠标悬停样式
                emphasis: {
                  type: "dotted", // 鼠标悬浮时线变为实线
                },
              },
              label: {
                show: true,
                color: "#ffffff",
                formatter: (a) => {
                  return `${a.name}:${a.value}`;
                },
                position: "insideMiddleTop",
                backgroundColor: {
                  image: img,
                  repeat: "no-repeat",
                },
                symbol: ["none", "none"],
                padding: [6, 6, 6, 6],
              },
              // 不要起始点样式
              symbol: ["none", "none"],
            },
            symbol: "none",
          },
        ],
      };
      //   最后的柱状图
      if (
        this.setting &&
        Array.isArray(this.setting.extraData) &&
        this.setting.extraData.length > 0
      ) {
        let extraData = this.setting.extraData.map((val) => {
          return {
            ...val,
            label: val.name,
            value: val.num,
          };
        });
        let objArr = [
          {
            name: "",
            type: "bar",
            data: extraData,
            barMaxWidth: 16,
            // 流光效果配置
            itemStyle: {
              barBorderRadius: [50, 50, 0, 0],
              color: {
                type: "linear",
                x: 0, //右
                y: 0, //下
                x2: 0, //左
                y2: 1, //上
                colorStops: [
                  {
                    offset: 0,
                    color: "#FB7224",
                  },
                  {
                    offset: 0.7,
                    color: "#FB722433",
                  },
                  {
                    offset: 1,
                    color: "#165DFF00",
                  },
                ],
              },
            },
          },
        ];
        option["series"] = option["series"].concat(objArr);
      }
      // 判断有没有辅助线
      if (
        this.setting &&
        Array.isArray(this.setting.markLine) &&
        this.setting.markLine.length > 0
      ) {
        let markLineArr = markLineF(this.setting.markLine);
        option.series[0].markLine.data = markLineArr;
      }
      myChart.setOption(option);
    },
    // 重新计算
    onResizeChange() {
      var myChart = this.$echarts.init(this.$refs.echartsArea);
      myChart.resize();
    },
    renderItem(params, api) {
      const value = api.value(0);
      const start = api.coord([api.value(1), api.value(0)]);
      const size = api.size([api.value(1), api.value(0)]);
      const style = api.style();

      // 流光效果的实现
      const rectShape = new echarts.graphic.Rect({
        shape: {
          x: start[0] - size[0] / 2,
          y: start[1],
          width: size[0],
          height: size[1],
        },
        style: style,
      });

      rectShape.style.fill = null;
      rectShape.style.stroke = "none";

      return rectShape;
    },
  },
  mounted() {
    // 解决页面不聚焦的时候柱形图丢失问题
    this.timesName = setInterval(() => {
      this.echartInit();
    }, 2000);
  },
  watch: {
    data(newVal, oldVal) {
      // 当 parentData 变化时，这个函数会被调用
      this.echartInit();
    },
  },
  computed: {
    // data里面包含 label value
    getSplitData() {
      let arr = {
        label: [],
        value: [],
      };
      this.data.filter((val, index) => {
        arr["label"].push(val.label);
        arr["value"].push(val.value);
      });
      return arr;
    },
  },
  // 销毁
  beforeDestroy() {
    onResizeChang("end", this.onResizeChange);
  },
};
</script>
<style lang="less" scoped>
.echarts {
  width: 100%;
  height: 100%;
}
</style>
